<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>装修费用单据统计查询</title>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui-1.8.22.custom.css" />
<!-- <link rel="stylesheet" type="text/css" href="jquery/jquery.dataTables.css" /> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="jquery/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="script/commons.js"></script>
<script type="text/javascript" src="script/calendar.js"></script>
<script type="text/javascript" src="script/objects.js"></script>
<style type="text/css">
.title {
	text-align: right;
	width: 70px;
}
.value {
	text-align: left;
}
.big {
	width: 210px;
}
.small {
	width: 170px;
}
.solidButton {
	border: 1px outset #ccc;
	height: 24px;
	line-height: 20px;
	width: 35px;
	background-color: #ccc;
}
#customers {
	display: none;
	position: absolute;
	z-index: 99;
}
.selecter {
	vertical-align: middle;
	line-height: 24px;
	height: 24px;
	margin-bottom: 3px;
}
.dataTables_wrapper {
	font-family: "微软雅黑";
	font-size: 14px;
}
table {
	border-collapse:collapse;
}
/*Reset*/
.ui-button {
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
.ui-icon {
	float: right;
}
#mainTable th {
	padding: 0px;
	border: #cccccc 1px solid;
}
/*
 * Page length menu
 */
.dataTables_length {
	float: left;
}


/*
 * Filter
 */
.dataTables_filter {
	float: right;
	text-align: right;
}


/*
 * Table information
 */
.dataTables_info {
	clear: both;
	float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
	float: right;
	text-align: right;
}
</style>
<script type="text/javascript">
	function setLoseColor() {
		$(".price").each(function(index, element) {
			if(parseFloat($(element).text().replace(/,/, "")) < 0){
				$(element).css("color", "red");
			}
        });
	}
	
	function setCustomer(){
		var $input = $(event.srcElement);
		if ($input.val() == ">>"){
			$input.val("<<");
			$("#customers").animate(
				{ opacity: "show" },
				"fast"
			);
		}else{
			$input.val(">>");
			$("#customers").animate(
				{ opacity: "hide" },
				"fast"
			);
			var ids = "";
			$("#customers").children("option").each(function(index, element) {
                if($(element).attr("selected")){
					ids += $(element).text() + ",";
					$(element).removeAttr("selected");
				}
            });
			ids = ids.substr(0, ids.length - 1);
			$("#cus").val("").val(ids);
		}
	}
	
	function check(s) {
		$("#toExcel").val(s);
		$("form").submit();
	}
	
	function getInfo(id){
		to((id.indexOf('A') > -1 ?
			"forwardReceiptadd.do?modifyId=" :
			"forwardbalanceadd.do?modifyId=")+
			id.substr(1)
		);
	}
	
	$(document).ready(function(e) {
		// 设置负金额为红色
		setLoseColor();
		// 设置金额千分符
		setSeparators();
		// 格式化表格
		var gridHeight = window.screen.availHeight - 400;
		$("#mainTable").dataTable({
			"oLanguage": {
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "没有找到任何记录",
            "sInfo": "当前显示 _TOTAL_ 条记录中的 _START_ 到 _END_ 条",
            "sInfoEmpty": "当前显示 0 条记录中的 0 到 0 条",
            "sInfoFiltered": "(从 _MAX_ 条中过滤)",
            "sSearch" : "搜索",
            "oPaginate": {
		        "sNext": "下一页",
		        "sPrevious": "上一页"
		    	}
        	},
        	"aLengthMenu": [[20, 50, -1], [20, 50, "ALL"]],
        	"sPaginationType": "full_numbers",
        	"sScrollY": gridHeight,
        	"bJQueryUI": true
		});
		$("#datepickers input").datepicker({
			changeMonth: true,
			changeYear: true,
			showButtonPanel: true,
			dateFormat: "yy-mm",
			closeText: "关闭",
			prevText: "&#x3c;上月",
			nextText: "下月&#x3e;",
			currentText: "今天",
			monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
			monthNamesShort: ["一","二","三","四","五","六","七","八","九","十","十一","十二"],
			dayNames: ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
			dayNamesShort: ["周日","周一","周二","周三","周四","周五","周六"],
			dayNamesMin: ["日","一","二","三","四","五","六"],
			weekHeader: "周"
		});
    });
</script>
</head>
<body>
	<html:form action="getInvoice.do" method="post">
        <div id="setWidth">
            <div class="button_bar xbutton_bar_img bottomBorder">
                <input type="button" value="查询" onclick="check('false')"/>
                <input type="button" value="导出" onclick="check('true')"/>
                <html:hidden property="toExcel" styleId="toExcel" />
            </div>
            <div class="button_bar">
                <table height="50" class="query_form_table">
                    <tr>
                        <th class="title">渠道名称：</th>
                        <th class="big value">
                            <html:text property="customer" styleClass="paddingText" styleId="cus"></html:text>
                            <input type="button" value=">>" style="padding: 0px 10px" class="selecter" onclick="setCustomer()" />
                            <select id="customers" name="customers" multiple="multiple" size="20">
                            	<c:forEach var="item" items="${customers}" varStatus="i">
                                <option value="${item.customerid}" >${item.customer}</option>
                                </c:forEach>
                            </select>
                            </th>
                        <th class="title">单据状态：</th>
                        <th class="value">
                        	<html:select property="isClosed" styleId="isClosed">
                            	<html:option value="-1">全部</html:option>
                            	<html:option value="1">已记账</html:option>
                            	<html:option value="0">未记账</html:option>
                            </html:select></th>
                        <th class="title">日期：</th>
                        <th class="value" id="datepickers">
                        <html:text property="date_Begin"></html:text>
                        -
                        <html:text property="date_End"></html:text></th>
                    </tr>
                </table>
            </div>
            <table id="mainTable" border="0" cellpadding="0" cellspacing="0" class="pretty">
                <thead>
                <tr>
                    <th rowspan="2">渠道名称</th>
                    <th rowspan="2">期初欠款</th>
                    <th colspan="${fn:length(monthList) + 1}">结算</th>
                    <th colspan="${fn:length(monthList) + 1}">收款</th>
                    <th rowspan="2">期末欠款</th>
                </tr>
                <tr>
                	<c:forEach var="m" items="${monthList}">
                    	<th>${m}</th>
                    </c:forEach>
                    <th>小计</th>
                    <c:forEach var="m" items="${monthList}">
                    	<th>${m}</th>
                    </c:forEach>
                    <th>小计</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="item" items="${invoices}">
                <tr class="dataRow">
                    <td>${item.customer}</td>
                    <td class="separators price">${item.begin}</td>
                    <c:forEach var="b" items="${item.balanceSts}">
                    	<td class="separators price">${b.totalValue}</td>
                    </c:forEach>
                    <td class="separators price">${item.balanceSt}</td>
                    <c:forEach var="r" items="${item.receiptSts}">
                    	<td class="separators price">${r.totalValue}</td>
                    </c:forEach>
                    <td class="separators price">${item.receiptSt}</td>
                    <td class="separators price">${item.end}</td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
	</html:form>
</body>
</html>